<template>
  <div :id="id" style="height: 180px;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "areaEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions(list) {
      this.options = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center",
          // doesn't perfectly work with our tricks, disable it
          selectedMode: false
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "70%"],
            // adjust the start angle
            startAngle: 180,
            label: {
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + " (" + param.percent * 2 + "%)";
              }
            },
            // data: [
            //   { value: 1048, name: "主体数据量" },
            //   { value: 735, name: "产品数据量" },
            //   { value: 580, name: "交易数据量" },
            //   {
            //     // make an record to fill the bottom 50%
            //     value: 1048 + 735 + 580,
            //     itemStyle: {
            //       // stop the chart from rendering this piece
            //       color: "none",
            //       decal: {
            //         symbol: "none"
            //       }
            //     },
            //     label: {
            //       show: false
            //     }
            //   }
            // ]
            data: list
          }
        ]
      };
    },
    initCharts() {
      // echarts.registerMap("平潭", pingtan);
      this.chart = echarts.init(document.getElementById(this.id));

      this.chart.setOption(this.options, true);
    }
  }
};
</script>
